<template>
	<view class="container">
		<image class="header-bg" v-if="resource['mine_header_bg']" :src="resource['mine_header_bg'].fileUrl" mode="widthFix"></image>
		<view class="body">
			<view class="header-wrap">
				<image class="header" v-if="resource['avartar']" :src="resource['avartar'].fileUrl" mode="widthFix"></image>
				<view class="text">{{user.name}}</view>
				<view class="label">{{user.idNumber}}</view>
			</view>
			<view class="card number-card">
				<view class="box">
					<view class="value">{{stat.thisYear?stat.thisYear:0}}</view>
					<view class="label"><text class="enlarge">今年</text><text class="reduce">/元</text></view>
				</view>
				<view class="split-line"></view>
				<view class="box">
					<view class="value">{{stat.lastYear?stat.lastYear:0}}</view>
					<view class="label"><text class="enlarge">去年</text><text class="reduce">/元</text></view>
				</view>
				<view class="split-line"></view>
				<view class="box">
					<view class="value">{{stat.total?stat.total:0}}</view>
					<view class="label"><text class="enlarge">累计</text><text class="reduce">/元</text></view>
				</view>
			</view>
			<view class="content-wrap">
				<view class="title-bar">
					<image class="title-img" src="../../static/img/title/title_jbxx.png" mode="widthFix"></image>
				</view>
				
				<view class="card info-card">
					<view class="row" v-for="info in infos">
						<view class="label">{{info.name}}</view>
						<view class="value">
							<text class="text">{{info.value?info.value:''}}</text>
							<view class="icon">
								<uni-icons type="right" size="16" color="#999999"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			<view class="foot-space"></view>
			<view class="foot">
				<view class="button" @click="logout">退出登陆</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import Store from '@/store/index.js';
	import { ApiDisbursement } from "@/api/subsidy/index.js";
	import { ApiResource } from '@/api/application/index.js';
	
	export default {
		data() {
			return {
				resource: {},
				user:{},
				infos:[],
				stat: {}
			}
		},
		created() {
			if(this.checkLogin()){
				this.getResources();
				this.getInfo();
				this.getStat();
			}
		},
		onShow() {
			if(this.checkLogin()){
				this.getResources();
				this.getInfo();
				this.getStat();
			}
		},
		onLoad() {
		
		},
		methods: {
			
			//获取网络资源
			getResources(){
				ApiResource.getByCode('mine_header_bg,avartar').then(res=>{
					res.data.forEach(item=>{
						this.resource[item.code] = item;
					})
				})
			},
			
			getInfo(){
				let a = [{
					name: '性别',
					code: 'gender',
					value: this.user.gender
				},{
					name: '出身日期',
					code: 'birthday',
					value: this.user.birthday
				},{
					name: '身份证号',
					code: 'idNumber',
					value: this.user.idNumber
				},{
					name: '手机号码',
					code: 'mobile',
					value: this.user.mobile
				},{
					name: '银行',
					code: 'bank',
					value: this.user.bank
				},{
					name: '银行卡号',
					code: 'cardNumber',
					value: this.user.cardNumber
				},{
					name: '家庭住址',
					code: 'homeAddress',
					value: this.user.homeAddress
				},{
					name: '居住地址',
					code: 'residentialAddress',
					value: this.user.residentialAddress
				}];
				this.infos = a;
			},
			
			getStat(){
				ApiDisbursement.stat({
					idNumber: this.user.idNumber,
					payStatus:'已发放',
					status: '1'
				}).then(res=>{
					this.stat = res.data;
				})
			},
			
			//登录状态检查
			checkLogin(){
				this.user = Store.getUser();
				if(this.user && this.user.id){
					return true;
				}else{
					uni.showToast({
						mask: true,
						title: '请先登录',
						icon: 'none'
					})
					uni.navigateTo({
						url: '/pages/login'
					})
					return false;
				}
			},
			
			logout(){
				uni.navigateTo({
					url: '/pages/login'
				})
			}

		}
	}
</script>

<style>
	.container {
		width: 750upx;
		height: 100vh;
		position: relative;		
	}
	.header-bg{
		width: 750upx;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
	}
	.body{
		width: 100vw;
		/* height: 100vh; */
		position: absolute;
		top: 0upx;
	}

	.header-wrap {
		width: 750upx;
		padding-top: 240upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.header-wrap .header{
		width: 140upx;
		height: 140upx;
		border-radius: 150upx;
	}
	.header-wrap .text{
		font-size: 16px;
		font-weight: bold;
		margin-top: 10upx;
		color: #333333;
	}
	.header-wrap .label{
		margin-top: 10upx;
		color: #999999;
	}
	.card{
		width: 670upx;
		padding: 40upx;
		box-sizing: border-box;
		background-color: white;
	}
	.number-card{
		margin: 30upx 40upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.number-card .box{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.number-card .box .value{
		font-size: 16px;
		font-weight: bold;
		color: #FF8900;
	}
	.number-card .box .label{
		margin-top: 10upx;
		font-weight: bold;
		color: #333333;
	}
	.number-card .box .enlarge{
		font-size: 14px;
	}
	.number-card .box .reduce{
		font-size: 12px;
	}
	.number-card .split-line{
		width: 2upx;
		height: 100upx;
		margin: 0 30upx;
		background-color: #D8D8D8;
	}
	.content-wrap{
		width: 750upx;
		padding: 30upx;
		box-sizing: border-box;
	}
	.title-bar{
		margin-bottom: 30upx;
	}
	.title-bar .title-img{
		width: 180upx;
	}
	.info-card{
		font-size: 14px;
		width: 690upx;
	}	
	.info-card .row{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15upx 0;
	}
	.info-card .row .label{
		color: #999999;
	}
	.info-card .row .value{
		color: #333333;
		display: flex;
		justify-content: right;
		align-items: center;
	}
	.info-card .row .icon{
		margin-bottom: -2upx;
		margin-right: -10upx;
	}
	.foot-space{
		height: 220upx;
	}
	.foot{
		width: 750upx;
		padding:30upx;
		position: fixed;
		bottom: 0upx;
		box-sizing: border-box;
		background-color: white;
	}
	.button{
		padding: 30upx;
		text-align: center;
		border-radius: 50upx;
		color: white;
		background: linear-gradient(to bottom, #FF8218, #FFAA00 );
	}
	
</style>
